<template>
  <div>
    <br />
    <div class="ribbon">
      <span class="ribbon3">
        <span class="hcqFont hcqStyle1"
          ><i class="el-icon-news" />最新上映</span
        >
      </span>
    </div>
    <!-- 走马灯轮播图 -->
    <template>
      <el-carousel trigger="click" height="400px" style="width: 1000px">
        <el-carousel-item v-for="movie in movieList" :key="movie.id">
          <el-image style="height: 100%" :src="movie.image"></el-image>
        </el-carousel-item>
      </el-carousel>
    </template>

    <!-- 分割线 -->
    <el-divider class="movieDivider" content-position="left">
      <span class="el-icon-video-camera"> 视频点播</span>
    </el-divider>
    <br />

    <!-- 电影卡片 -->
    <el-row style="margin-left: 50px">
      <el-col
        :span="3"
        v-for="(movie, index) in movieList"
        :key="movie.id"
        :offset="index > 0 ? 1 : 0"
      >
        <el-card :body-style="{ padding: '0px' }" style="margin-bottom: 20px">
          <div class="cardMovie">
            <router-link target="_blank" :to="{path: '/moviePlayer', query:{id: movie.id}}">
              <img :src="movie.image" class="image" />
            </router-link>
          </div>
          <div style="padding: 4px">
            <span class="movieName">{{ movie.name }}</span>
            <div class="bottom clearfix">
              <p class="time">上映时间</p>
              <time class="time">{{ movie.createTime }}</time>
            </div>

            <el-popover
              placement="bottom-start"
              :title="movie.name"
              width="200"
              trigger="hover"
              :content="'💃主演 \n'+movie.actor">
              <el-button size="small" slot="reference" class="el-icon-discount"> 查看详情</el-button>
            </el-popover>
          </div>
        </el-card>

      </el-col>
    </el-row>
  </div>
</template>

<script>
import api from "@/api/movieData/movieData.js";

export default {
  data() {
    return {
      movieList: [],
      searchMovieData: {
        pageNum: 1,
        pageSize: 11,
        total: 11,
        cid: 0,
      },
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    //查询影片数据
    fetchData() {
      api.getNewMovieList(this.searchMovieData).then((res) => {
        this.movieList = res.data.data.rows;
        // console.log(this.movieList);
      });
    },
  },
};
</script>

<style>

.el-popover{
  white-space: pre-wrap;
}

.el-card:hover {
  margin-top: -10px;
  padding-bottom: 10px;
}

.el-divider__text.is-left {
  left: 150px;
  height: 35px;
}
.el-divider__text {
  background: rgb(190, 246, 170);
}
.movieDivider {
  width: 85%;
  left: 5%;
  text-align: center;
}
.movieDivider span {
  font-size: 20px;
  line-height: 35px;
}

.movieName {
  display: block;
  /* //超出一行省略号 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.cardMovie {
  display: flex;
  justify-content: center;
  align-items: center;
}

.image {
  height: 200px;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.ribbon {
  position: absolute;
  z-index: 9999;
  top: 70px;
  left: 260px;
}
.ribbon3 {
  display: inline-block;
  position: absolute;
  width: 200px;
  height: 50px;
  line-height: 50px;
  padding-left: 15px;
  /* background: #ff404e; */
  background: linear-gradient(to right, #ff404e, rgb(246, 194, 170, 70%));
  opacity: 0.9;
  left: -8px;
  top: 20px;
}
.ribbon3:before,
.ribbon3:after {
  content: "";
  position: absolute;
}
.ribbon3:before {
  height: 0;
  width: 0;
  border-bottom: 8px solid #ff404e;
  border-left: 8px solid transparent;
  top: -8px;
  left: 0;
}
.ribbon3:after {
  height: 0;
  width: 1px;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-left: 15px solid rgb(246, 194, 170, 70%);
  right: -15px;
}

.hcqFont {
  position: relative;
  letter-spacing: 8px;
  font-size: 25px;
  font-weight: normal;
  margin: 0 auto;
}
.hcqFont:before,
.hcqFont:after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.hcqStyle1 {
  color: #ffc75a;
  text-shadow: 0 0 1px currentColor, /*highlight*/-1px -1px 1px #fcd518,
    0 -1px 1px #fcd518, 1px -1px 1px #fcd518,
    /*light shadow*/ 1px 1px 1px hsl(184, 80%, 10%),
    0 1px 1px hsl(184, 80%, 10%), -1px 1px 1px hsl(184, 80%, 10%),
    /*outline*/-2px -2px 1px hsl(184, 80%, 15%),
    -1px -2px 1px hsl(184, 80%, 15%), 0 -2px 1px hsl(184, 80%, 15%),
    1px -2px 1px hsl(184, 80%, 15%), 2px -2px 1px hsl(184, 80%, 15%),
    2px -1px 1px hsl(184, 80%, 15%), 2px 0 1px hsl(184, 80%, 15%),
    2px 1px 1px hsl(184, 80%, 15%), -2px 0 1px hsl(184, 80%, 15%),
    -2px -1px 1px hsl(184, 80%, 15%), -2px 1px 1px hsl(184, 80%, 15%),
    /*dark shadow*/ 2px 2px 2px hsl(184, 80%, 5%), 1px 2px 2px hsl(184, 80%, 5%),
    0 2px 2px hsl(184, 80%, 5%), -1px 2px 2px hsl(184, 80%, 5%),
    -2px 2px 2px hsl(184, 80%, 5%);
}
</style>